<template>
  <div class='timeline'>
    <ul class="t-ul">
      <li class="t-li" v-for="(item, index) in timelineDataBackups" :key="index">
        <div v-if="!item.state">
          <div @click="handleRound(item)" class="l-round-dot"></div>
          <div class="l-line"></div>
          <div class="t-l-top">
            <div class="l-t-date">{{ item.timestamp }}</div>
            <div v-if="item.relationship === 'we'" class="l-t-tag-true tag">我方</div>
            <div v-if="item.relationship === 'enemy'" class="l-t-tag-false tag">敌方</div>
            <div v-if="item.orderOfBattle" @click="handleBattle(item)" class="l-t-button tag">战斗序列</div>
          </div>
          <div class="t-l-content">
            {{ item.content }}
          </div>
          <span @click="handleStory(item)" v-if="item.story" class="t-l-bottom tag">
            小故事
          </span>
        </div>
      </li>
    </ul>
  </div>
</template>
<script lang='tsx' setup>
type timeline = {
  timestamp: string
  relationship: string
  orderOfBattle: string
  story: string
  content: string
}
const timelineDataBackups = reactive([])
const props = defineProps({
  timelineData: {
    type: Array as PropType<timeline[]>,
    default: () => [],
  },
});

const stateSwitch = ref(true)
const handleRound = (dataRow: timeline) => {
  if (stateSwitch.value) {
    for (const element of timelineDataBackups) if (element.timestamp === dataRow.timestamp) element.state = true
    dataRow.state = false
  } else for (const element of timelineDataBackups) if (element.timestamp === dataRow.timestamp) element.state = false
  stateSwitch.value = !stateSwitch.value
}
const handleBattle = (dataRow: timeline) => {
  alert('单击了战斗序列')
}
const handleStory = (dataRow: timeline) => {
  alert('单击了小故事')
}
onMounted(() => {
  Object.assign(timelineDataBackups, props.timelineData)
})
</script>
<style lang='scss' scoped>
.tag {
  font-size: 14px;
  padding: 2px 10px;
  border-radius: 3px;
}



.timeline {
  width: 100%;
  overflow-y: auto;
  scrollbar-width: none;

  .t-ul {
    list-style-type: none;

    .t-li {
      position: relative;
      padding-bottom: 20px;

      .l-round-dot {
        position: absolute;
        left: -35px;
        width: 20px;
        height: 20px;
        background-color: #039595;
        border-radius: 50%;
        cursor: pointer;
        z-index: 2;
      }

      .l-line {
        position: absolute;
        left: calc(-35px + 10px);
        top: 20px;
        border: 1px solid #d8d8d8;
        height: 100%;
      }

      .t-l-top {
        display: flex;
        justify-content: start;
        align-items: center;

        div {
          margin-right: 10px;
        }

        .l-t-date {
          font-size: 25px;
          font-weight: bold
        }

        .l-t-tag-true {
          position: relative;
          bottom: 10px;
          background-color: #eff3ff;
          color: #2164f4;
        }

        .l-t-tag-false {
          position: relative;
          bottom: 10px;
          background-color: #fdf1f4;
          color: #eb5d78;
        }

        .l-t-button {
          cursor: pointer;
          position: relative;
          bottom: 10px;
          background-color: #e7fdfd;
          color: #05d1c3;
        }
      }

      .t-l-content {
        font-size: 14px;
        line-height: 25px;
      }

      .t-l-bottom {
        cursor: pointer;
        position: relative;
        top: 5px;
        background-color: #fff9ea;
        color: #f4c456;
      }
    }
  }
}
</style>
